<template>
<div class="square">
    <div class="header">
        <div class="title">AI绘画广场</div>
        <div class="search">
            <a-input
                size="large"
                placeholder="prompt关键词搜索"
                v-model:value="state.params.prompt"
                @input="get_list_data"
            />
        </div>
    </div>
    <div class="container">
        <div class="waterfall" v-if="state.loading">
            <a-skeleton active />
        </div>
        <div class="waterfall" v-else>
            <div class="item">
                <a-image-preview-group>
                    <div v-for="item in state.data.data" :key="item.id" style="margin-bottom: 10px">
                        <a-image
                            width="100%"
                            :src="item.image"
                            :alt="item.title"
                        />
                    </div>
                </a-image-preview-group>
            </div>
        </div>
        <a-empty v-if="state.data.total == 0"/>
    </div>
</div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from "vue"
import { get_list } from "/@/api/frontend/chat/draw"
import { fullUrl } from "/@/utils/common";

const state: {
    loading: boolean,
    skeleton: boolean,
    data: any,
    params: any
} = reactive({
    loading: false,
    skeleton: true,
    data: [],
    params: {
        show_type: 'all',
        prompt: '',
        page: 1,
        limit: 30,
    }
})
// 获取绘画列表
const get_list_data = async () => {
    state.loading = true
    const res = await get_list(state.params)
    if (res.code === 1) {
        state.skeleton = false
        state.data = res.data
        // 循环每个image添加full_url函数
        state.data.data.forEach((item: any) => {
            item.image = fullUrl(item.image)
        })
    }
    state.loading = false
}
onMounted(() => {
    get_list_data()
})
</script>

<style scoped lang="scss">
html {
    &.dark {
        .square {
            background-color: var(--bg-color);
        }
    }
}
.square {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 16px;
    background-color: #e7ecf6;
    .header {
        padding: 16px;
        .title {
            font-size: 20px;
            font-weight: bold;
        }
        .search {
            margin-top: 16px;
        }
    }
    .container {
        padding: 16px;
        .waterfall {
            .item {
                column-count: 7;
                column-gap: 10px;
            }
        }
    }
}
@media screen and (max-width: 768px) {
    .square {
        padding: 0;
        .container {
            .waterfall {
                .item {
                    column-count: 2;
                }
            }
        }
    }
}
</style>
